import 'package:flutter/material.dart';

class CustomSlider extends StatefulWidget {
  final String title;
  final String endTitle;
  final double value;
  final double min;
  final double max;
  final ValueChanged<double> onChanged;

  const CustomSlider({
    super.key,
    required this.title,
    required this.endTitle,
    required this.value,
    required this.min,
    required this.max,
    required this.onChanged,
  });

  @override
  State<CustomSlider> createState() => _CustomSliderState();
}

class _CustomSliderState extends State<CustomSlider> {
  // 记录拖动开始时的初始值和位置，用于计算相对位移
  double? _startValue;
  Offset? _startPosition;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            width: 50,
            child: Text(
              widget.title,
              style: const TextStyle(
                fontSize: 14,
                color: Color(0xFF666666),
              ),
            ),
          ),
          Expanded(
              child: // 自定义滑动条
                  SizedBox(
            height: 32,
            child: LayoutBuilder(
              builder: (context, constraints) {
                final sliderWidth = constraints.maxWidth;
                // 计算滑块位置百分比
                final percentage =
                    (widget.value - widget.min) / (widget.max - widget.min);
                // 计算已滑动部分宽度
                final activeWidth = sliderWidth * percentage;

                return Stack(
                  children: [
                    // 滑动条背景（带边框和阴影）
                    Positioned(
                      left: 0,
                      right: 0,
                      top: 12,
                      height: 18,
                      child: Container(
                        decoration: BoxDecoration(
                          color: Color.fromARGB(255, 255, 255, 255),
                          borderRadius: BorderRadius.circular(4),
                          border: Border.all(
                            color: Color.fromARGB(255, 236, 236, 236),
                            width: 1,
                          ),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.black.withOpacity(0.05),
                              blurRadius: 2,
                              offset: const Offset(0, 1),
                            ),
                          ],
                        ),
                      ),
                    ),

                    // 已滑动部分（红色）
                    Positioned(
                      left: 0,
                      top: 12,
                      width: activeWidth,
                      height: 18,
                      child: Container(
                        decoration: BoxDecoration(
                          color: const Color(0xFFe9614d),
                          borderRadius: BorderRadius.circular(4),
                        ),
                      ),
                    ),

                    // 方形滑块（带阴影）
                    Positioned(
                      left: activeWidth, // 居中显示
                      top: 8,
                      width: 12,
                      height: 24,
                      child: GestureDetector(
                        // 记录开始拖动时的状态
                        onHorizontalDragStart: (details) {
                          _startValue = widget.value;
                          _startPosition = details.localPosition;
                        },

                        // 处理拖动更新 - 关键修复
                        onHorizontalDragUpdate: (details) {
                          if (_startValue == null || _startPosition == null)
                            return;

                          // 计算相对滑动距离（与初始位置的差值）
                          final delta =
                              details.localPosition.dx - _startPosition!.dx;

                          // 根据滑动条宽度计算百分比变化
                          final percentageDelta = delta / sliderWidth;

                          // 计算新值 = 初始值 + 变化量
                          final newValue = _startValue! +
                              (percentageDelta * (widget.max - widget.min));

                          // 限制在有效范围内
                          final clampedValue =
                              newValue.clamp(widget.min, widget.max);

                          // 回调更新值
                          widget.onChanged(clampedValue);
                        },

                        // 拖动结束后清理
                        onHorizontalDragEnd: (_) {
                          _startValue = null;
                          _startPosition = null;
                        },

                        child: Container(
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(12),
                            border: Border.all(
                              color: Color.fromARGB(255, 215, 215, 215),
                              width: 1,
                            ),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.1),
                                blurRadius: 4,
                                spreadRadius: 1,
                                offset: const Offset(0, 2),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ],
                );
              },
            ),
          )),
          Container(
            width: 50,
            margin: EdgeInsets.only(left: 16),
            child: Text(
              widget.endTitle,
              style: const TextStyle(
                fontSize: 14,
                color: Color(0xFF666666),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
